<template>
  <div class="log-logo"><img src="~@/assets/images/logo.png"/></div>
  <div class="kg-log-bg">
    <a-form
    :model = formState 
    autocomplete="off"
     @finish="onFinish"
    @finishFailed="onFinishFailed"
    >
      <div class="kg-logo-bg-title">立即注册</div>
      <div class="kg-log-ul">
        <div class="kg-log-li">
          <a-form-item
            name="nick_name"
            :rules="[{ required: true, message: '请输入姓名!' }]"
          >
            <a-input v-model:value="formState.nick_name" class="kglogo-input" placeholder="请输入姓名" />
          </a-form-item>  
        </div>
        <div class="kg-log-li icon3">
          <a-form-item
            name="IDcard"
            :rules="[{ required: true, message: '请输入身份证号!' }]"
          >
            <a-input v-model:value="formState.IDcard" class="kglogo-input" placeholder="请输入身份证号" />
          </a-form-item>  
        </div>
        <div class="kg-log-li icon2">
          <a-form-item
            name="password"
            :rules="[{ required: true, message: '请输入密码' },{min:6,message:'长度为6-12位字符'}]"
          >
            <a-input-password v-model:value="formState.password" maxlength="12" class="kglogo-input" placeholder="请输入密码" />
          </a-form-item>
        </div>
        <div class="kg-log-li icon2">
          <a-form-item
            name="password2"
            :rules="[{ required: true, message: '请再次输入密码' },{min:6,message:'长度为6-12位字符'}]"
          >
            <a-input-password v-model:value="formState.password2" maxlength="12" class="kglogo-input" placeholder="请再次输入密码" />
          </a-form-item>
        </div>
        <div class="kg-log-lib"><router-link to="/passport/login"><i class="micon">&#xe62c;</i>已有账号，前往登录！</router-link></div>
      </div>
      <a-form-item>
          <a-button type="primary" class="but-a" html-type="submit">注 册</a-button>
        </a-form-item>
    
    </a-form>

  </div>
</template>

<script>
import { register } from '@/api/login'
import { message } from "ant-design-vue";
import { useRouter } from 'vue-router';
import { useStore } from 'vuex'
import { defineComponent, reactive } from "vue";
export default defineComponent({
  name: 'Reg',
  setup(){
    const store = useStore();
    const router = useRouter()
    const formState = reactive({});
    const onFinish = form => {
      if(form.password != form.password2){
        message.error('两次密码不一致！',1.5);return;
      }
      store.dispatch('Register', form).then((result)=>{
        loginSuccess(result)
      });
    };
    const onFinishFailed = errorInfo => {
      console.log('Failed:', errorInfo);
    };
    const loginSuccess=values=>{
      message.success(values.message, 3)
      setTimeout(() => {
        router.push('/profile');
      }, 1000)
    }
    return {
      formState,
      onFinish,
      onFinishFailed,
    };
  },
  
})
</script>


<style scoped>

::v-deep .ant-input-affix-wrapper{width: 100%; height:1.04rem; line-height: 1;border-radius: 0.52rem; background: #e6e6e6; border: none;}
::v-deep .ant-input{background: none; border: none;}
::v-deep .ant-input:focus,::v-deep .ant-input-focused,::v-deep .ant-input-affix-wrapper:focus,::v-deep .ant-input-affix-wrapper-focused{box-shadow:none;}
::v-deep .ant-btn-primary{border:none; background: #332fab; text-shadow:none; box-shadow:0 5px 10px rgba(21, 29, 194,.35);}
::v-deep .ant-btn{line-height: 1.066667rem; padding: 0; color: #fff;}
::v-deep .ant-btn-primary[disabled], ::v-deep .ant-btn-primary[disabled]:hover, ::v-deep .ant-btn-primary[disabled]:focus, ::v-deep .ant-btn-primary[disabled]:active{}
</style>